<template>
    <div>
        <Form :model="formItem" :label-width="180" label-position="right">
            <Card :bordered="false" style="background:#fff;padding: 20px;width: 70vw;">
                <p slot="title">修改公司信息</p>

                <FormItem label="公司图片：">
                    <input type="file" @change="upImg($event,'company_pic')" accept="image/*">
                    <div class="picDiv">
                        <img class="pic" v-if="!formItem.company_pic.length" :src="defaultPic">
                        <div class="picBox" v-else v-for="(item, index) in formItem.company_pic" :key="index">
                            <img class="pic" :src="item">

                            <p class="close" @click="picDel(index,'company_pic')">
                                <img src="@/assets/images/close.png" />
                            </p>
                        </div>
                    </div>
                </FormItem>

                <FormItem label="公司名称：">
                    <Input v-model="formItem.company_name" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="公司负责人：">
                    <Input v-model="formItem.company_person" class="FormItemInput inline" placeholder="姓名"></Input>
                    <Input v-model="formItem.company_tel" class="FormItemInput inline" placeholder="联系电话"></Input>
                </FormItem>

                <FormItem label="办公人员：">
                    <div v-for="(item, index) in formItem.company_work_preson" :key="index" style="margin-bottom:10px">
                        <Input v-model="item.username" class="FormItemInput inline" placeholder="姓名"></Input>
                        <Input v-model="item.tel" class="FormItemInput inline" placeholder="联系电话"></Input>
                        <Icon v-if="index < formItem.company_work_preson.length-1" @click="delOfficeStaff(index)" color="red" size="25" type="ios-remove-circle-outline" style="font-weight: 700;" />

                        <span v-else>
                            <Icon @click="delOfficeStaff(index)" v-show="index !== 0" color="red" size="25" type="ios-remove-circle-outline" style="font-weight: 700;" />
                            <Icon @click="addOfficeStaff" color="#2d8cf0" size="25" type="ios-add-circle-outline" style="font-weight: 700;" />
                        </span>
                    </div>
                </FormItem>

                <FormItem label="到期时间：">
                    <DatePicker :value="formItem.company_out_time" @on-change="formatTime($event,'company_out_time')" type="date" format="yyyy-MM-dd" placeholder="到期时间" style="width: 200px"></DatePicker>
                </FormItem>

                <FormItem label="入驻时间：">
                    <DatePicker :value="formItem.company_in_time" @on-change="formatTime($event,'company_in_time')" type="date" format="yyyy-MM-dd" placeholder="入住时间" style="width: 200px"></DatePicker>
                </FormItem>

                <FormItem label="公司简介：">
                    <Input type="textarea" v-model="formItem.company_introduce" :autosize="{minRows: 4,maxRows: 10}" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="主营业务：">
                    <Input type="textarea" v-model="formItem.company_business" :autosize="{minRows: 4,maxRows: 10}" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="对游客开放企业信息">
                    <RadioGroup v-model="formItem.is_show_company">
                        <Radio :label="0">否</Radio>
                        <Radio :label="1">是</Radio>
                    </RadioGroup>
                </FormItem>

                <Button type="primary" class="sure_btn" @click="save">保存</Button>
            </Card>
        </Form>
    </div>
</template>
<script>
    import {
        mapMutations
    } from 'vuex'
    import axios from '@/libs/api.request'
    export default {
        name: 'officeInfo-edit',
        data() {
            return {

                // 办公人员
                work_preson: [{
                    username: '',
                    tel: ''
                }],

                defaultPic: require('@/assets/images/addressAddBtn_03.jpg'),
                formItem: {}
            }
        },
        methods: {
            ...mapMutations(['closeTag', 'removeCatchPages']),
            close() {
                this.removeCatchPages(this.$options.name)
                this.closeTag({
                    name: 'officeInfo-edit',
                    params: this.$route.params
                })
            },

            // 格式化时间
            formatTime(time, mk) {
                this.formItem[mk] = time
            },
            // 添加一个办公人员
            addOfficeStaff() {
                this.formItem.company_work_preson.push({
                    name: '',
                    tel: ''
                })
            },

            // 删除一个办公人员
            delOfficeStaff(index) {
                this.formItem.company_work_preson.splice(index, 1)
            },

            // 上传图片
            upImg(e, mk) {
                const file = e.target.files
                for (let i = 0; i < file.length; i++) {
                    // up_to_cos 第二个参数表示返回的url类型
                    // 0：cos，1：cdn,2:带图片处理的cdn
                    axios.up_to_oos(file[i], (file_url) => {
                        this.formItem[mk].push(file_url)
                    })
                }
            },

            // 删除图片
            picDel(index, mk) {
                this.formItem[mk].splice(index, 1)
            },

            // 保存
            save() {
                let data = {
                    wsid: this.formItem.id,
                    company_pic: this.formItem.company_pic,
                    company_name: this.formItem.company_name,
                    company_person: this.formItem.company_person,
                    company_tel: this.formItem.company_tel,
                    company_work_preson: JSON.parse(JSON.stringify(this.formItem.company_work_preson)),
                    company_out_time: this.formItem.company_out_time,
                    company_in_time: this.formItem.company_in_time,
                    company_introduce: this.formItem.company_introduce,
                    company_business: this.formItem.company_business,
                    is_show_company: this.formItem.is_show_company
                }
                data.company_work_preson.forEach((item, i) => {
                    if ((item.username == "") || (item.tel == "")) {
                        data.company_work_preson.splice(i, 1)
                    }
                })
                axios.ajax_post('admin-work_station-ajax_save_company', data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.close()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            }
        },
        created() {
            this.formItem = JSON.parse(JSON.stringify(this.$route.params))
            if (this.formItem.company_work_preson.length == 0) {
                this.formItem.company_work_preson = [{
                    username: '',
                    tel: ''
                }]
            }
        },
        activated() {
            if (this.formItem.id != this.$route.params.id) {
                this.formItem = JSON.parse(JSON.stringify(this.$route.params))
                if (this.formItem.company_work_preson.length == 0) {
                    this.formItem.company_work_preson = [{
                        username: '',
                        tel: ''
                    }]
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    .FormItemInput {
        width: 30vw;

        &.inline {
            width: 14vw;
            margin-right: 28px;

            &:nth-of-type(2n) {
                margin-right: 0;
            }
        }
    }

    .sure_btn {
        margin-left: 30vw;
        width: 10vw;
    }

    .picDiv {
        width: 150px;
        display: flex;
        position: relative;
        padding-top: 15px;
    }

    .picDiv .pic {
        width: 150px;
    }

    .picBox {
        position: relative;
        margin-right: 20px;
    }

    .close {
        position: absolute;
        top: -7px;
        right: -7px;
        cursor: pointer;
    }
</style>